<template>
  <div style="width: 100%; height: 100%" class="bgu">
    <TopNavigationBar ref="TopNavigationBar" />
    <!-- <div class="check">
      <el-checkbox v-model="checked1" @change="checkChange">高铁</el-checkbox>
      <el-checkbox v-model="checked2" @change="checkChange">普铁</el-checkbox>
    </div> -->
    <div class="content">
      <div class="row">
        <div style="height: 32%" class="rowRadius">
          <Module1
            ref="Module1"
            :rail-types="railTypes"
            :dept-code="userInfo.deptCode"
            @module1Click="module1Click" />
        </div>
        <div style="height: 32%" class="rowRadius">
          <Module4
            ref="Module4"
            :rail-types="railTypes"
            :dept-code="userInfo.deptCode"
            @module1Click="module4Click" />
        </div>
        <div style="height: 32%" class="rowRadius">
          <Module7
            ref="Module7"
            :rail-types="railTypes"
            :dept-code="userInfo.deptCode"
            @module1Click="module1Click" />
          <!-- <div class="leftIcon" />
          <Module3 ref="Module3" :dept-code="userInfo.deptCode" />-->
        </div>
      </div>
      <div class="row">
        <div style="height: 32%" class="rowRadius">
          <Module2
            ref="Module2"
            :rail-types="railTypes"
            :dept-code="userInfo.deptCode"
            @module1Click="module1Click" />
        </div>
        <div style="height: 32%" class="rowRadius">
          <Module6
            ref="Module6"
            :rail-types="railTypes"
            :dept-code="userInfo.deptCode"
            @module1Click="module1Click" />
        </div>
        <div style="height: 32%" class="rowRadius">
          <Module9
            ref="Module9"
            :rail-types="railTypes"
            :dept-code="userInfo.deptCode"
            @module1Click="module1Click" />
        </div>
      </div>
      <div class="row1">
        <div style="height: 32%" class="rowRadius">
          <Module3 ref="Module3" :dept-code="userInfo.deptCode" />
        </div>
        <div style="height: 32%" class="rowRadius">
          <Module5 ref="Module5" :rail-types="railTypes" :dept-code="userInfo.deptCode" />
        </div>
        <div style="height: 32%" class="rowRadius">
          <Module8 ref="Module8" :dept-code="userInfo.deptCode" @seeNotice="seeNotice" />
        </div>
      </div>
    </div>
    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="70%">
      <moduleDialog1
        v-if="moduleType == 'module1'"
        ref="moduleDialog1"
        :type="type"
        :rail-types="railTypes"
        :dept-code="userInfo.deptCode" />
      <moduleDialog2
        v-if="dialogTitle == '缺陷单位分布详情'"
        ref="moduleDialog2"
        :dept-code="type"
        :dept-id="type"
        :rail-types="railTypes" />
      <moduleDialog3 v-if="dialogTitle == '检测计划兑现详情'" ref="moduleDialog3" :type="CType" :rail-types="railTypes" />
      <moduleDialog4 v-if="dialogTitle == '周期检测覆盖详情'" ref="moduleDialog4" :type="CType" :rail-types="railTypes" />
      <moduleDialog5 v-if="dialogTitle == '分析进度详情'" ref="moduleDialog5" :type="CType" :rail-types="railTypes" />
      <moduleDialog6 v-if="dialogTitle == '检测数据详情'" ref="moduleDialog6 " :type="CType" :rail-types="railTypes" />
    </el-dialog>
    <div class="moduleDialog3">
      <el-dialog :title="dialogTitle3" :visible.sync="dialogVisible3" width="70%">
        <moduleDialog3 v-if="dialogTitle3 == '检测计划兑现详情'" ref="moduleDialog3" :type="CType" :rail-types="railTypes" />
      </el-dialog>
    </div>
    <el-dialog title="通知公告" :visible.sync="seeNoticeShow" width="70%">
      <seeNotice
        ref="seeNotice"
        :see-notice-date="seeNoticeDate"
        :see-notice-item="seeNoticeItem"
        :see-notice-index="seeNoticeIndex"
        @seeNotice="seeNotice" />
    </el-dialog>
  </div>
</template>
<script>
import TopNavigationBar from '@/views/jjxt/components/TopNavigationBar'
import Module1 from './components/module1.vue'
import Module2 from './components/module2.vue'
import Module3 from './components/module3.vue'
import Module4 from './components/module4.vue'
import Module5 from './components/module5.vue'
import Module6 from './components/module6.vue'
import Module7 from './components/module7.vue'
import Module8 from './components/module8.vue'
import Module9 from './components/module9.vue'
import moduleDialog1 from './components/moduleDialog1.vue'
import moduleDialog2 from './components/moduleDialog2.vue'
import moduleDialog3 from './components/moduleDialog3.vue'
import moduleDialog4 from './components/moduleDialog4.vue'
import moduleDialog5 from './components/moduleDialog5.vue'
import moduleDialog6 from './components/moduleDialog6.vue'
import seeNotice from './components/seeNotice.vue'
import { mapGetters } from 'vuex'
import store from '@/store'
export default {
  components: {
    TopNavigationBar,
    Module1,
    Module2,
    Module3,
    Module4,
    Module5,
    Module6,
    Module7,
    Module8,
    Module9,
    moduleDialog1,
    moduleDialog2,
    moduleDialog3,
    moduleDialog4,
    moduleDialog5,
    moduleDialog6,
    seeNotice
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      checked2: false,
      checked1: true,
      railTypes: 'GT,PT',
      dialogVisible: false,
      dialogTitle: '',
      CType: '',
      type: '',
      moduleType: '',
      dialogTitle3: false,
      dialogVisible3: false,
      seeNoticeShow: false,
      seeNoticeDate: [],
      seeNoticeItem: {},
      seeNoticeIndex: 0
    }
  },
  methods: {
    checkChange() {
      if (this.checked1 && this.checked2) {
        this.railTypes = 'GT,PT'
      } else if (this.checked1 && this.checked2 === false) {
        this.railTypes = 'GT'
      } else if (this.checked1 === false && this.checked2) {
        this.railTypes = 'PT'
      } else {
        this.railTypes = ''
      }
    },
    module1Click(val) {
      console.log(val)
      this.CType = val.CType
      if (val.type) {
        this.type = val.type
      }
      if (val.moduleType) {
        this.moduleType = val.moduleType
      }
      if (val.type === 2) {
        this.dialogTitle = '已销号缺陷信息详情'
      } else if (val.type === 3) {
        this.dialogTitle = '未销号缺陷信息详情'
      } else if (val.type === 4) {
        this.dialogTitle = '一级缺陷信息详情'
      } else if (val.type === 5) {
        this.dialogTitle = '二级A类缺陷信息详情'
      } else if (val.type === 6) {
        this.dialogTitle = '二级B类缺陷信息详情'
      } else {
        this.dialogTitle = val.title
      }
      this.dialogVisible = true
    },
    module4Click(val) {
      console.log(val)
      this.CType = val.CType
      this.dialogTitle3 = val.title
      this.dialogVisible3 = true
    },
    seeNotice(val) {
      this.seeNoticeDate = val.data
      this.seeNoticeItem = val.item
      this.seeNoticeIndex = val.index
      this.seeNoticeShow = true
    }
  }
}
</script>
<style lang="scss" scoped>
.bgu {
  background: url("./welcome.png");
}
.content {
  width: 100%;
  height: calc(100% - 100px);
  padding: 40px;
  padding-top: 0;
  color: #fff;
  z-index: 100;
  display: flex;
  justify-content: space-between;
}
.row {
  width: 36%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.row1 {
  width: 26%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.rowRadius {
  position: relative;
  background: linear-gradient(
    180deg,
    rgba(26, 57, 124, 0.6) 0%,
    rgba(26, 48, 104, 0.6) 56.6%
  );
  border: 1px solid #5471ff;
}
.leftIcon {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  height: 1px;
  background-color: #0054a2;
}
.leftIcon::after {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  left: 0;
  width: 20px;
  height: 3px;
  background-color: #0085ff;
}
/deep/.el-dialog {
  background: linear-gradient(0deg, #000d3d, #000d3d),
    linear-gradient(0deg, #000d3d, #000d3d), #000d3d !important;
  border: 1px solid #5471ff !important;
  box-sizing: border-box;
}
/deep/ .el-dialog .el-dialog__header {
  height: 54px;
  background: transparent !important;
  border-bottom: 1px solid #5471ff;
  font-weight: bold;
  font-size: 18px;
}
/deep/ .el-dialog .el-dialog__body {
  height: calc(900px - 54px);
  padding: 20px;
}
.moduleDialog3 /deep/.el-dialog .el-dialog__body {
  height: 536px !important;
  padding: 20px;
}
/deep/ .el-dialog__headerbtn {
  width: 20px;
  height: 20px;
}
/deep/.el-dialog__headerbtn .el-dialog__close {
  display: block;
}
.leftIcon::before {
  content: "";
  display: block;
  position: absolute;
  top: -1px;
  right: 0;
  width: 20px;
  height: 3px;
  background-color: #0085ff;
}
.check {
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 40px;
}
/deep/.el-checkbox,
/deep/.el-checkbox__input.is-checked + .el-checkbox__label {
  font-size: 14px;
  color: #cce7ff;
}
/deep/ .el-checkbox__inner {
  background: transparent;
  border: 1px solid #3282fb;
}
</style>
